<template>
  <div class="monitor-main">
    <div class="header">
      <el-button size="small" @click="clickConfigUrlButton"
        >配置监控地址</el-button
      >
    </div>
    <div class="main" v-loading="iframeLoading">
      <iframe
        :src="monitorUrl"
        width="100%"
        height="100%"
        frameborder="0"
				@load="onIframeLoad"
      ></iframe>
    </div>
    <el-dialog
      title="监控地址"
      v-model="monitorDialogVisiable"
      width="500"
      style="height: 165px"
			@close="dialogClose"
    >
      <el-form ref="formRef" label-width="auto" :model="formModel" :rules="rules">
        <el-form-item label="地址" prop="monitorUrl">
          <el-input v-model="formModel.monitorUrl" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="clickConfirmButton">确认</el-button>
        <el-button @click="monitorDialogVisiable = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref,onMounted } from "vue";
//弹窗显隐
const monitorDialogVisiable = ref(false);
//iframe loading状态
const iframeLoading = ref(true);
//表单对象
const formRef = ref(null);
//表单数据
const formModel = ref({
  monitorUrl: "",
});
//监视网址
const monitorUrl = ref("");
//表单验证
const rules = {
  monitorUrl: [
    {
      required: true,
      trrige: "blur",
      message: "请输入监控地址",
    },
  ],
};
//点击配置监视地址按钮
const clickConfigUrlButton = () => {
	formModel.value.monitorUrl = monitorUrl.value;
  monitorDialogVisiable.value = true;
};
//点击确认按钮
const clickConfirmButton = ()=>{
	//表单验证
	formRef.value.validate(valid=>{
		if(valid){
			if(monitorUrl.value != formModel.value.monitorUrl){
				iframeLoading.value = true;
			}
			monitorDialogVisiable.value = false;
			monitorUrl.value = formModel.value.monitorUrl;
			if(monitorUrl.value.indexOf("&kiosk") == -1){
				monitorUrl.value = monitorUrl.value + "&kiosk";
			}
			window.localStorage.setItem("monitorUrl",monitorUrl.value)
		}
	})
}
//弹窗关闭
const dialogClose = ()=>{
	//重置数据
	formRef.value.resetFields();
}
//iframe加载完成回调
const onIframeLoad = ()=>{
	iframeLoading.value = false;
}
//组件初始化
onMounted(()=>{
	let url = window.localStorage.getItem("monitorUrl");
	if(url){
		monitorUrl.value = url;
	}else{
		monitorUrl.value = "http://localhost:3000"
	}
})
</script>
<style scoped>
.monitor-main {
  width: 100%;
  height: 100%;
	padding: 8px;
  .header {
    height: 48px;
    width: 100%;
    padding: 6px 0;
  }
  .main {
    height: calc(100% - 48px);
    width: 100%;
  }
}
</style>
